<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div id="app">
    <h2>总价： {{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            books: [
                {id: 101, name: 'java编程入门', price: 105},
                {id: 102, name: 'Unix编程艺术', price: 110},
                {id: 103, name: '深入理解计算机系统', price: 98},
                {id: 104, name: '现代操作系统', price: 87}
            ]
        },
        computed: {
            // 计算属性会有缓存，若值未改变，那计算属性也不会重新请求，与方法不同
            totalPrice: function(){
                let sum = 0;
                for (let index = 0; index < this.books.length; index++) {
                    const element = this.books[index];
                    sum += element.price;
                }
                return sum;
            }
        }
    })
</script>
</body>
</html>